<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <script src="https://unpkg.com/vue@next"></script>
    <!-- import CSS -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-plus/dist/index.css"
    />
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-plus"></script>
    <title>Element Plus demo</title>
    <style>
      #app {
        width: 100%;
        height: 100%;
        display: flex !important;
        align-items: center;
        justify-content: center;
        background-color: #eef2fc;
      }

      h1 {
        padding: 0;
        margin: 0;
      }

      .formWrapper {
        width: 800px;
        height: 500px;
        background-color: #ffffff;
      }

      .demo-form-inline .el-input {
        --el-input-width: 220px;
      }

      .button {
        display: flex;
        justify-content: center;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="formWrapper">
        <h1>员工入职信息录入</h1>
        <el-form
          :inline="true"
          :model="formInline"
          class="demo-form-inline"
          :label-width="90"
        >
          <el-form-item label="姓名">
            <el-input
              v-model="formInline.name"
              placeholder="请输入姓名"
              clearable
            />
          </el-form-item>
          <el-form-item label="性别">
            <el-select
              v-model="formInline.sex"
              placeholder="Select"
              size="large"
            >
              <el-option
                v-for="item in sexOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="年龄">
            <el-input
              v-model="formInline.age"
              placeholder="请输入年龄"
              clearable
            />
          </el-form-item>
          <el-form-item label="出生年月">
            <el-date-picker
              v-model="formInline.birth"
              type="date"
              placeholder="请输入出生年月"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item label="婚姻状况">
            <el-select
              v-model="formInline.marriage"
              placeholder="请选择婚姻状况"
            >
              <el-option
                v-for="item in marriageOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="民族">
            <el-select v-model="formInline.nation" placeholder="请选择民族">
              <el-option
                v-for="item in nations"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="身份证号码">
            <el-input
              v-model="formInline.userId"
              placeholder="请输入身份证号码"
              clearable
            />
          </el-form-item>
          <el-form-item label="联系方式">
            <el-input
              v-model="formInline.phoneNumber"
              placeholder="请输入联系方式"
              clearable
            />
          </el-form-item>
          <el-form-item label="邮箱地址">
            <el-input
              v-model="formInline.email"
              placeholder="请输入邮箱地址"
              clearable
            />
          </el-form-item>
          <el-form-item label="部门">
            <el-cascader
              ref="cascaderRef"
              :show-all-levels="false"
              v-model="formInline.depId"
              :options="caserData"
              :placeholder="'请选择部门'"
              :props="cascaderProps"
              @change="handleChange"
            />
          </el-form-item>
          <el-form-item label="岗位">
            <el-select
              v-model="formInline.partId"
              :disabled="partDisabled"
              placeholder="请选择岗位"
            >
              <el-option
                v-for="item in partOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item v-show="false">
            <el-input v-model="formInline.snowId"></el-input>
          </el-form-item>
        </el-form>
        <div class="button">
          <el-button type="primary" @click="onSubmit">立即提交</el-button>
        </div>
      </div>
    </div>
    <script>
      const App = {
        async created() {
          const body = {
            username: "yk",
            password: "yk",
          };
          this.formInline.snowId = body?.urlSnowId || "";

          const res1 = await this.fetchData(
            "http://liujijiself.f3.ttkt.cc/personnelManagement/employees/login",
            body
          );
          this.token = res1.data.token;
          const res2 = await this.fetchData(
            "http://liujijiself.f3.ttkt.cc/personnelManagement/departments/getDepartmentRelationshipMap",
            {}
          );
          this.caserData = res2.data;
          console.log(res2.data);

          const sexInfo = await this.fetchData(
            "http://liujijiself.f3.ttkt.cc/personnelManagement/system/getSysGender",
            {}
          );
          this.sexOptions = sexInfo.data.list;

          const marrInfo = await this.fetchData(
            "http://liujijiself.f3.ttkt.cc/personnelManagement/system/getSysMarriage",
            {}
          );
          this.marriageOptions = marrInfo.data.list;

          const nationInfo = await this.fetchData(
            "http://liujijiself.f3.ttkt.cc/personnelManagement/system/getSysNation",
            {}
          );
          console.log(nationInfo)
          this.nations = nationInfo.data.list;
          console.log(this.nation)
        },
        data() {
          return {
            partDisabled: true,
            partOptions: [],
            token: "",
            caserData: [],
            formInline: {
              name: "",
              sex: "",
              age: "",
              birth: "",
              marriage: "",
              nation: "",
              userId: "",
              phoneNumber: "",
              depId: "",
              partId: "",
              email: "",

              snowId: "",
            },
            sexOptions: [],
            marriageOptions: [],
            nations: [],
            cascaderProps: {
              emitPath: false,
              checkStrictly: true,
            },
            lixf: "",
          };
        },
        methods: {
          async handleChange(v) {
            const node = this.$refs.cascaderRef.getCheckedNodes(false);
            this.formInline.depId = node[0].data.value;
            this.partDisabled = false;
            let body = {
              departmentId: this.formInline.depId,
              currentPage: 1,
              pageSize: -1,
            };
            const res = await this.fetchData(
              "http://liujijiself.f3.ttkt.cc/personnelManagement/departments/obtainJobPositionsByDepartmentId",
              body
            );
            this.partOptions = res.data.list.map((item) => {
              return {
                label: item.positionName,
                value: item.positionId,
              };
            });
          },
          fetchData(url, body) {
            const p = new Promise((resovle, reject) => {
              fetch(url, {
                method: "POST",
                body: JSON.stringify(body),
                headers: {
                  "Content-Type": "application/json",
                },
              })
                .then((response) => response.json())
                .then((data) => {
                  resovle(data);
                })
                .catch((err) => {
                  throw new Error(err);
                });
            });
            return p;
          },
          async onSubmit() {
            const res = await this.fetchData(
              "http://liujijiself.f3.ttkt.cc/personnelManagement/employees/collectOnboardingReportsAndReports",
              this.formInline
            );
            console.log(res);
            if (res && res.code == 200) {
              alert("填写成功！");
            }
          },
        },
      };
      const app = Vue.createApp(App);
      app.use(ElementPlus);
      app.mount("#app");
    </script>
  </body>
</html>
